CSS背景屬性 可以給頁面元素添加背景樣式
背景屬性可設置背景顏色、背景圖片、背景平舖、背景圖片位置、圖像固定等等

1.背景顏色
background-color屬性可定義元素的背景顏色

background-color:顏色值;

background-color:red;

默認為透明值: transparent

2.背景圖片

background-image屬性可定義元素的背景圖片

於logo或一些裝飾性的小圖片或是超大的背景圖片是常見的使用情況
優點是較於便於控制位置

background-image : none|url(url)
默認值為none(沒有圖片)

3.背景平舖
background-repeat屬性定義背景圖片的平鋪

background-repeat:repeat|no-repeat|repear-x|repeat-y

repeat (背景圖像片在縱向和橫向上的平鋪 (默認))
no-repeat(背景圖片不平鋪)
repeat-x (背景圖片在x軸(橫向)平舖
repeat-y (背景圖片在y軸(縱向)平舖
round (使用縮放或變形的方式，讓背景圖片在不裁切的情況下填滿背景。)

4.背景圖片位置
利用background-position:x y進行調整背景圖片位置
參數代表的意思是X座標或Y座標 可以使用方位名詞或是精確單位

backgorund-position:x y;

length 百分數組成的長度值
position top|center|bottom|left|right|  (方位名詞)

備註 :

• 參數是方位名詞時

• 如果指定的兩個值都是方位名詞，則兩個值前後順序無關

• 比如left top和top left效果是一致

• 只指定了一個方位 另外一個值省略，則第二個值默認居中對齊

• 參數是精確單位時

• 若是精確座標 前一定為X座標 後一定為Y座標

• 若只指定一個數值 該數值一定為X 另一個為居中

• 參數是混和單位時

• 使用方位名詞時看則精確單位 ex: 20px center

• 第一個值為X座標 第二個值為Y座標

5.背景圖像固定
background-attachment 屬性設置背景圖像是否固定或隨著頁面的其餘部分滾動
且後期可以製作視差滾動的效果

background-attachment: scroll | fixed

scroll = 背景圖像隨對象內容進行滾動
fixed = 背景圖像固定

6.背景複合寫法
以上背景屬性皆可簡寫在一個屬性background中去進行設定背景元素
普遍使用的約定順序為:

background:背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;

background:red url(image.jpg) repeat-y fixed top;

7.背景色半透明做法
CSS3為我們提供了背景顏色半透明的效果

background: rgba(0,0,0,0.3);

• 最後一個參數是alphe透明度 取值在0-1之間
• 習慣把0.3的0省略掉
• 注意: 背景半透明是指盒子背景半透明 內容不影響

背景屬性 codepen:
可自己copy code 帶入圖片嘗試